<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<!-- 头部 -->
		<u-navbar title="申请退款" :autoBack="true" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#111111" :titleStyle="titleStyle"></u-navbar>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="c_title">{{object.title}}</view>
			<view class="c_box">
				<view class="c_item">
					<view class="ci_left">
						<text class="cli_title">退款数量</text>
						<text class="cli_tip">（可退 {{ktNum}} 张）</text>
					</view>
					<view class="ci_right">
						<image src="@/static/index/steamerTicket/img_reduce.jpg" @tap="reduceNum"></image>
						<text class="cir_num">{{object.num}}</text>
						<image src="@/static/index/steamerTicket/img_increase.jpg" @tap="increaseNum"></image>
					</view>
				</view>
				<view class="c_item">
					<view class="ci_left">
						<text>退款金额</text>
					</view>
					<view class="ci_right">
						<text class="cir_money">￥{{object.price*object.num}}</text>
					</view>
				</view>
				<view class="c_item">
					<view class="ci_left">
						<text>退款账户</text>
					</view>
					<view class="ci_right ci_tkzh">
						<view class="cit_zh">原支付账户</view>
						<view class="cit_tip"><text>1-7个工作日</text><text>内到账</text></view>
					</view>
				</view>
			</view>
			<view class="c_box c_box_yy">
				<view class="cb_title">退订原因</view>
				<view v-for="(item,index) in refundReasons" :key="index" class="cb_item">
					<view>{{item.title}}</view>
					<image src="@/static/my/icon_select.png" v-if="item.selected" @tap="selectReason(item,index)"></image>
					<image src="https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png" v-else @tap="selectReason(item,index)"></image>
				</view>
				<view class="cb_textarea" v-if="ridx==refundReasons.length-1">
					<textarea cols="30" rows="10" placeholder="请输入" v-model="refundReason" @blur="setOtherReason" @confirm="setOtherReason"></textarea>
				</view>
				<view class="cb_tip">
					退款申请一经提交后不可撤销
				</view>
			</view>
			<view class="btn" @tap="toResult">申请退款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getWindowInfo().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				object:null,
				ktNum:'',
				refundReasons:[
					{title:'不需要了',selected:false},
					{title:'价格不划算',selected:false},
					{title:'商家无法提供服务',selected:false},
					{title:'预约问题',selected:false},
					{title:'其他原因',selected:false}
				],
				refundReason:'',
				ridx:''
			}
		},
		onLoad(option) {
			if(option.object){
				this.object = JSON.parse(option.object);
				this.ktNum = this.object.num;
			}
		},
		methods: {
			reduceNum(){
				if(this.object.num==1) return;
				this.object.num--;
			},
			increaseNum(){
				if(this.object.num==this.ktNum) return;
				this.object.num++;
			},
			setOtherReason(e){
				this.refundReason = e.target.value;
			},
			selectReason(item,index){
				this.refundReasons.forEach((r,i)=>{
					this.$set(this.refundReasons[i],'selected',index===i?true:false);
				})
				this.refundReason = item.title;
				this.ridx = index;
			},
			toResult(){
				if(!this.refundReason) return this.$showToast('请选择或输入退订原因');
				uni.navigateTo({
					url:'/pagesMy/seaFishingOrder/refundDetails'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.content{
			padding-bottom: 30rpx;
			.c_title{
				width: 100%;
				padding: 27rpx 24rpx;
				box-sizing: border-box;
				background: #fff;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}
			
			.c_box{
				border-top: 20rpx solid #F5F8FA;
				background: #fff;
				padding: 0 24rpx;
				box-sizing: border-box;
				&.c_box_yy{
					padding: 40rpx 24rpx 30rpx;
				}
				.c_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(112, 112, 112, .1);
					padding: 24rpx 0;
					&:last-child{
						align-items: baseline;
						border-bottom: none;
					}
					.ci_left{
						display: flex;
						align-items: center;
						text{
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							&.cli_title{
								font-size: 30rpx;
								color: #333333;
							}
							&.cli_tip{
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
					.ci_right{
						display: flex;
						align-items: center;
						image{
							width: 44rpx;
							height: 44rpx;
						}
						text{
							font-size: 28rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							&.cir_num{
								padding: 0 30rpx;
							}
						}
						.cir_money{
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #FF4141;
						}
						&.ci_tkzh{
							display: flex;
							flex-direction: column;
							.cit_zh{
								width: 100%;
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								text-align: right;
							}
							.cit_tip{
								display: flex;
								align-items: center;
								margin-top: 11rpx;
								text{
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									&:first-child{
										font-size: 24rpx;
										color: #FF7D01;
									}
									&:last-child{
										font-size: 26rpx;
										color: #999999;
										padding-left: 10rpx;
									}
								}
							}
						}
					}
				}
				
				.cb_title{
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					padding-bottom: 25rpx;
				}
				
				.cb_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 31rpx 0;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					text{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
				
				.cb_textarea{
					width: 100%;
					height: 168rpx;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					textarea{
						border: none;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 24rpx;
						&::placeholder{
							color: #CCCCCC;
						}
					}
				}
				
				.cb_tip{
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 20rpx 0 0;
					box-sizing: border-box;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF7D01;
				}
			}
			
			.btn{
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				margin: 92rpx 24rpx 0;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>